<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
		<script src="js/serverUrl.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mint.js"></script>
		<script src="js/moment.js"></script>
		
	<body>
		<div id="app" >
	
			<div id="table" class="card">
                <div v-for="item in trainingList" class="trainingItem" @click.stop="toDetail(item.type,item.trainingId)" style="padding-bottom: 10px;">
					<div><span class="type" :style="{'background-color':item.color}">{{item.typeName}}</span></div>
					
					<div class="trainingTitle"><span ><img src="img/training_class_image.png" class="titeImage"></span>{{item.trainingClassName}}</div>
					
					<div class="trainingRow" >
						<div class="trainingInfo" style="font-size: 12px;">部门：{{item.businessCompanyName}}</div>
						<div class="trainingInfo" style="font-size: 12px;">{{item.trainingDate | formatDay}}~{{item.endTime | formatDay}}</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		
		var app = new Vue({
		  el: '#app',
		  data:{
		  trainingList:
			[],
		  },
		  filters:{
			formatDay(val){
				if (val == null) {
					return ""
				}
				return moment(val).format("YYYY-MM-DD")
			}
		  },
		  created() {
			window.getTrainingList = this.getTrainingList
			window.clear = this.clear
		  },
		  methods:{
			  clear() {
				this.trainingList = [] 
			  },
			  getTrainingList (trainingList){
				for(let i = 0;i<trainingList.length;i++){
					let item = trainingList[i]
					switch(item.type){
						case 0:
							item.typeName = "专项培训"
							item.color = "#fd7359"
							break;
						case 1:
							item.typeName = "岗位培训"
							item.color = "#feb62e"
							break;
						case 2:
							item.typeName = "安全培训"
							item.color = "#5bcba7"
							break;
						case 3:
							item.typeName = "实操培训"
							item.color = "#25a6fa"
							break;
					}
				}
				this.trainingList = this.trainingList.concat(trainingList)
			  },
              toDetail (type,trainingId) {
                  let params = {
                      type:type,
                      trainingClassId:trainingId
                  }
                 WebViewJavascriptBridge.callHandler('toDetail',params);
              }
		  }
		})		
		</script>
</html>
